<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="_token" content="{{csrf_token()}}">
        <title>登录-高层建筑基础信息采集</title>
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <style>
            html,
            body,
            #app {
                margin: 0;
                padding: 0 8px;
                align-items: center;
                padding-top: 25px;
            }
            [v-cloak] {
                display: none !important;
            }
            h3{
                color: #0095ff;
                text-align: center;
            }
            form{
                width: 100%;
                margin-top: 40px;
            }
            .button{
                width: 100%;margin-top: 10px;
            }
            .el-message--error {
                min-width: calc(100vw - 16px);
            }
        </style>
    </head>
    <body>
        <div id="app" v-cloak>
            <h3>江北区消防救援支队</h3>
            <h3>高层建筑基础信息采集</h3>
            <el-form ref="form" class="form" status-icon :rules="rules" :model="form" label-position="top">
                <el-form-item prop="username">
                    <el-input prefix-icon="el-icon-user-solid" v-model="form.username" placeholder="请输入您的名字"></el-input>
                </el-form-item>
                <el-form-item prop="mobile">
                    <el-input prefix-icon="el-icon-mobile-phone" v-model="form.mobile" placeholder="请输入您的手机号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="button" :loading="button.loading" :disabled="button.disabled"
                               @click="submit">@{{ button.text }}
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </body>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/jquery@3.6.4/dist/jquery.js"></script>
    <script src="{{ asset('js/func.js') }}"></script>
    <script>
        new Vue({
            el: '#app',
            data: ()=>{
                var validateTel = (rule, value, callback) => {
                    var reg = /^((13|14|15|16|17|18|19)[0-9]\d{8})$/;
                    if (!reg.test(value)) {
                        callback(new Error('请输入正确的手机号'));
                    } else {
                        callback();
                    }
                };
                return {
                    button: {loading: false, disable: false, text: '登 录'},
                    form: {
                        username: "{{ $username }}",
                        mobile: "{{ $mobile }}",
                    },
                    rules: {
                        username: [{required: true, message: '请输入您的名字', trigger: 'blur'}],
                        mobile: [
                            {required: true, message: '请输入您的手机号', trigger: 'blur'},
                            {validator: validateTel, trigger: 'blur'}
                        ],
                    }
                }
            },
            methods: {
                submit() {
                    this.$refs['form'].validate((valid) => {
                        if (valid) {
                            this.button.disabled = true;
                            this.button.loading = true;
                            this.button.text = '登录中...';
                            let target = "{{ route('home.login.register') }}";
                            let method = "post";
                            let data = this.form;
                            request(target, method, data).then((res) => {
                                this.button.disabled = false;
                                this.button.loading = false;
                                this.button.text = '登 录';
                                this.$message({
                                    message: res.message,
                                    duration: 1500,
                                    type: res.status == 0 ? 'success' : 'error',
                                    onClose: ()=>{
                                        if (res.status == 0) {
                                            window.location.href = "{{ route('home.index.index') }}";
                                        }
                                    }
                                });
                            }).catch((e) => {
                                this.button.disabled = false;
                                this.button.loading = false;
                                this.button.text = '登 录';
                            });
                        }
                    });
                },
            },
        });
    </script>
</html>
